<template>
    <el-aside width="200px" class="image-aside">
        <div class="aside-top">
        <galleryAsideList 
        :active=" activeId === item.id" 
        v-for="item in galleryList" 
        :key="item.id" 
        @edit="editHandler(item)"
        @remove="removeHandler(item)"
        @click="changeActiveId(item.id)"
        >
            {{ item.name }}
        </galleryAsideList>
        </div>
        <!-- 分页区域 -->
        <div class="aside-bottom">
            <el-pagination background layout="prev,  next" :total="total" 
            :current-page="page" 
            :page-size="limit" 
            @current-change="getGalleryList" />

        </div>
    </el-aside>
    <drawer ref="drawerHtml" :closeOnPress="true" :closeButton="true">
        <template #top>
            <h3>修改图库分类</h3>
        </template>
        <template #content>
            <el-form :model="form" label-width="120px" class="form">
                <el-form-item label="相册名称">
                    <el-input v-model="form.input" placeholder="Please input" />
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number v-model="form.num" :min="1" :max="50" controls-position="right" size="large" />
                </el-form-item>
            </el-form>
        </template>
        <template #bottom>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button type="default" @click="cancelHandler">取消</el-button>
        </template>
    </drawer>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import galleryAsideList from '@/components/galleryAsideList.vue'
import type { addGalleryForm } from '@/config/gallery'
import { updateGalleryClassApi , galleryListApi ,removeGalleryClassApi} from '@/api/gallery'
import { ElMessage } from 'element-plus'
import drawer from '@/components/drawer.vue'

const page = ref<number>(1)
// 选中图库Id
const activeId = ref(0)
const total = ref(100)
const limit = ref(10)
// 列表数据
const galleryList = ref()
// 获取图库列表数据
const getGalleryList = async (p:any = null) => {
    if(typeof p === 'number')page.value = p    
    const res = await galleryListApi(page.value, limit.value)
    // 总条数
    total.value = res.data.data.totalCount
    galleryList.value = res.data.data.list    
    let item = galleryList.value[0]
    if(item) changeActiveId(item.id)   
}
getGalleryList()

const drawerHtml = ref()
const editId = ref(0)

const editHandler = (item:any) => {
    drawerHtml.value.kai()    
    form.input = item.name,
    form.num = item.order
    editId.value = item.id
}
const form: addGalleryForm = reactive({
    input: '',
    num: 0,
})


const cancelHandler = () => {
    drawerHtml.value.guan()
    form.input = '',
        form.num = 0
}
// 修改
const submit = async () => {
    const res = await updateGalleryClassApi(editId.value,form.input,form.num)
    drawerHtml.value.guan()
    if (res.data.msg === 'ok') {
        ElMessage({
            message: '修改成功.',
            type: 'success',
        })
        window.location.reload()
    } else {
        ElMessage({
            message: '修改失败',
            type : 'warning'
        })
    }
}

// 删除
const removeHandler = async(item:any) => {
    const res = await removeGalleryClassApi(item.id)
    if(res.data.msg === 'ok'){
        ElMessage({
            message: '已删除.',
            type: 'success',
        })
        window.location.reload()
    }else {
        ElMessage({
            message: '删除失败',
            type : 'warning'
        })
    }
    
}

// 选中列表
const changeActiveId = (id:number) => {
    activeId.value = id
    emit('change',id)
}
const emit = defineEmits(['change'])
</script>
<style lang='scss' scoped>
.el-aside {
    width: 200px;
    position: relative;



    >.aside-bottom {
        position: absolute;
        height: 40px;
        bottom: 0px;
        left: 0;
        background-color: #fff;
        width: 100%;
        text-align: center;
        line-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.aside-top {
    position: absolute;
    top: 0;
    bottom: 40px;
    left: 0;
    right: 0;
    overflow: auto;
}
.form {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    >.el-input {
        width: 300px;

    }

    >.el-input-number {
        margin-top: 100px;
    }
}
</style>